<template>
  <div class="about">
    <my-header></my-header>
    <div>
      <div class="banner">
        <img
          src="http://www.yhachina.com/images/exhibition/exhibition-banner3.jpg"
          alt=""
        />
      </div>

      <div class="box">
        <div class="explain">
          <div class="explain_bar">
            <h2>旅舍加盟</h2>
            <p>
              加盟YHA®青年旅舍®，成为YHA®的一员，帮助年轻人实现”读万卷书，行万里路”的梦想。
            </p>
          </div>
        </div>

        <div class="item">
          <div class="content-left">
            <ul>
              <li>
                <img
                  src="	http://www.yhachina.com/images/exhibition/exhibition-l-iten4.jpg"
                  alt=""
                />
                <div class="img1">
                  <h3>加盟优势</h3>
                  <div class="hidden1">
                    <a href=""> <span>|</span> 青年旅舍组织 </a>
                    <a href=""> <span>|</span> 全球网络优势 </a>
                    <a href=""> <span>|</span> 青年旅舍的特色 </a>
                  </div>
                </div>
              </li>
              <li>
                <img
                  src="http://www.yhachina.com/images/exhibition/exhibition-l-iten5.jpg"
                  alt=""
                />
                <div class="img1">
                  <h3>加盟方法</h3>
                  <div class="hidden1">
                    <a href=""> <span>|</span> 下载加盟申请表 </a>
                    <a href=""> <span>|</span> 加盟流程图 </a>
                    <a href=""> <span>|</span> 加盟问与答</a>
                  </div>
                </div>
              </li>
              <div class="bottom">
                <li>
                  <img
                    src="http://www.yhachina.com/images/exhibition/exhibition-l-iten6.jpg"
                    alt=""
                  />
                  <div class="img2">
                    <h3>品牌和资质</h3>
                    <div class="hidden2">
                      <a href=""> <span>|</span> 国际联盟正式会员证书 </a>
                      <a href=""> <span>|</span>青年旅舍品牌保护</a>
                    </div>
                  </div>
                </li>
                <li>
                  <img
                    src="	http://www.yhachina.com/images/exhibition/exhibition-l-iten7.jpg"
                    alt=""
                  />
                  <div class="img3">
                    <h3>青旅资源库</h3>
                    <div class="hidden3">
                      <a href=""> <span>|</span> 注册商标指引</a>
                      <a href=""> <span>|</span> 国际图标</a>
                    </div>
                  </div>
                </li>
              </div>
            </ul>
          </div>
          <div class="content-right">
            <div class="block2">
              <router-link to="/yuding" class="block2-a" href="">
                <i></i>
                旅舍预定
              </router-link>
              <router-link to="/vip" class="block2-b" href="">
                <i></i>
                会员卡
              </router-link>
              <router-link to="/join" class="block2-c" href="">
                <i></i>
                旅舍加盟
              </router-link>
              <a class="block2-d" href="">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue"
import MyFooter from "@/components/MyFooter.vue"
export default {
  components: { MyHeader, MyFooter },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.banner {
  img {
    display: block;
    width: 100%;
  }
}
.box {
  width: 1080px;
  // height: 1030px;
  margin: 0 auto;
  > .explain {
    width: 1080px;
    height: 72px;
    margin: 0 auto;
    color: #333;
    top: -60px;
    position: relative;
    > .explain_bar {
      margin: 0 0 60px;
      padding: 30px;
      margin-bottom: 60px;
      height: 130px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 15px 35px -15px rgb(47 130 36 / 70%);
      text-align: left;
      font: inherit;
      border-bottom: 30px;

      > h2 {
        font-size: 30px;
        line-height: 100%;
        margin-bottom: 10px;
        position: absolute;
        font-weight: normal;
        margin: 0 0 10px;
        color: #333;
        > font {
          vertical-align: super;
          font-size: 50%;
        }
      }

      > p {
        font-size: 14px;
        position: absolute;
        bottom: -26px;
        color: #333;
        > font {
          vertical-align: super;
          font-size: 50%;
        }
      }
    }
  }
  > .item {
    width: 1080px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

    > .content-left {
      text-align: left;
      width: 900px;
      overflow: hidden;
      margin: 15px auto;
      // margin-left: -40px;
      // margin-bottom: 40px;
      > ul {
        list-style: none;
        > li {
          margin: 0 20px 20px 0;
          position: relative;
          overflow: hidden;
          border-radius: 5px;
          display: inline-block;
          &:hover .img1 {
            // animation: move 0.5s linear;
            top: 300px;
          }
          // @keyframes move {
          // 	0%{
          // 		transform: translateY(0);
          // 	}
          // 	100%{
          // 		transform:translateY(-120px);
          // 	}
          > img {
            width: 395px;
            height: 400px;
            border-radius: 5px;
          }
          > .img1 {
            transition: 0.5s ease;
            width: 395px;
            height: 100px;
            background-color: rgba(135, 197, 36, 0.9);
            position: absolute;
            top: 340px;

            > .hidden1 {
              position: absolute;
              width: 770px;
              padding: 0 20px 10px;

              > a {
                font-size: 14px;
                width: 160px;
                display: inline-block;
                margin: 10px;
                color: #fff;
                text-decoration: none;
              }
            }
            h3 {
              margin: 20px;
              font-size: 20px;
              font-weight: bold;
              color: #fff;
              > font {
                vertical-align: super;
                font-size: 50%;
              }
            }
          }
        }
        > .bottom {
          width: 810px;
          display: flex;
          justify-content: space-between;

          > li:nth-child(1) {
            width: 395px;
            height: 400px;
            margin: 0 20px 20px 0;
            position: relative;
            overflow: hidden;
            border-radius: 5px;

            &:hover .img2 {
              //  animation: move 0.5s linear;
              top: 250px;
            }

            > img {
              border-radius: 5px;
            }
            > .img2 {
              transition: 0.5s ease;
              width: 395px;
              height: 150px;
              background-color: rgba(247, 148, 28, 0.9);
              position: absolute;
              top: 340px;

              > .hidden2 {
                position: absolute;
                width: 380px;
                height: 89px;
                padding: 0 20px 10px;
                display: flex;
                flex-wrap: wrap;
                margin-top: 10px;
                margin-right: 20px;

                > a {
                  font-size: 14px;
                  //word-wrap: wrap;
                  width: 160px;
                  display: inline-block;
                  margin-bottom: 10px;
                  color: #fff;
                  text-decoration: none;
                  margin-right: 5px;
                  line-height: 20px;
                }
              }
              h3 {
                margin: 20px;
                font-size: 20px;
                font-weight: bold;
                color: #fff;
                margin-bottom: 10px;
                > font {
                  vertical-align: super;
                  font-size: 50%;
                }
              }
            }
          }
          > li:nth-child(2) {
            width: 395px;
            height: 400px;
            margin: 0 0 20px 0;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
            &:hover .img3 {
              // animation: move 0.5s linear;
              top: 285px;
            }
            > img {
              border-radius: 5px;
            }
            > .img3 {
              transition: 0.5s ease;
              width: 395px;
              height: 115px;
              background-color: rgba(75, 143, 204, 0.9);
              position: absolute;
              top: 340px;

              > .hidden3 {
                position: absolute;
                width: 355px;
                height: 55px;
                padding: 0 20px 10px;
                display: flex;
                flex-wrap: wrap;
                //margin-top: 3px;

                > a {
                  font-size: 14px;
                  width: 150px;
                  display: inline-block;
                  margin-bottom: 10px;
                  color: #fff;
                  text-decoration: none;
                  line-height: 20px;
                }
              }
              h3 {
                margin: 20px;
                font-size: 20px;
                font-weight: bold;
                color: #fff;
                > font {
                  vertical-align: super;
                  font-size: 50%;
                }
              }
            }
          }
        }
      }
    }
    > .content-right {
      width: 240px;
      height: 363px;
      padding-top: 15px;

      // background-color: #551a8b;
      .block2 {
        a {
          display: block;
          text-decoration: none;
          font-size: 18px;
          color: #fff;
          font-weight: bold;
          height: 80px;
          line-height: 80px;
          margin-bottom: 1px;
          background-image: url(../assets/img/jiantou.png);
          background-repeat: no-repeat;
          background-position: right 20px center;
          border-radius: 5px;
          &.block2-a {
            background-color: #87c524;
            i {
              display: inline-block;
              width: 30px;
              height: 30px;
              background-image: url(../assets/img/app_z.png);
              background-position: -389px -422px;
              vertical-align: middle;
              margin: 0 10px 0 20px;
            }
          }
          &.block2-b {
            background-color: #f7941c;
            i {
              display: inline-block;
              width: 30px;
              height: 30px;
              background-image: url(../assets/img/app_z.png);
              background-position: -419px -422px;
              vertical-align: middle;
              margin: 0 10px 0 20px;
            }
          }
          &.block2-c {
            background-color: #4b8fcc;
            margin-bottom: 20px;
            i {
              display: inline-block;
              width: 30px;
              height: 30px;
              background-image: url(../assets/img/app_z.png);
              background-position: -476px -60px;
              vertical-align: middle;
              margin: 0 10px 0 20px;
            }
          }
          &.block2-d {
            border: none;
          }
        }
      }
    }
  }
}
</style>
